<template>
	<view style="background-color: pink;">
		<loading-page />
		<!-- <button type="default" @click="open()">打开弹窗</button> -->
		<!-- <skeleton :loading="true" :skeleton="['list_service']"></skeleton> -->
		<!-- <button open-type="getUserInfo" @getuserinfo="getuserinfo">测试点击</button>
		<button @click="getInfo">测试点击</button>
		<button @click="upload">测试上传图片</button>
		<button @click="myDemo">测试myDemo</button>
		<view style="width: 750rpx;">
		</view>
		<steps :list="data.steps" :active="1" size="48" lineScale="70" activePointColor="#E1835B" activeLineColor="#E1835B" activeTextColor="#222" activeDescColor="#aaa" />
		<steps :list="data.steps2" :active="-1" activeTextColor="#222" activeDescColor="#aaa" />
		<view style="width: 218rpx;">
			<lazy-load-image class="img" image="" :avator="false" :errorImg="config.errorImage.img"  imgMode='aspectFill' height="218rpx" />
		</view>
		<image class="image-demo" src="" mode="aspectFill" style="width: 100px;height: 100px;"></image>
		<button type="default" @click="openTan">弹出</button>
		<uni-popup ref="popup" type="bottom" backgroundColor="#fff">
			<view class="content" style="height: 100px;background-color: #fff;">
				我是内容
			</view>
		</uni-popup> -->
		<!-- <order-item-empty /> -->
		<!-- <button type="default" @click="openMini">打开小程序</button> -->
	</view>
</template>
<script setup>
	import { ref, reactive, defineComponent } from 'vue';
	import { addTask } from '@/subpages/common/api/task/edit.js';
	import { uploadImg } from '@/subpages/common/api/upload.js';
	// import d from '@/commonPackage/index.js';
	import { showModal } from '@/common/hooks/useShow.js';
	import useStatus from '@/common/hooks/useStatus.js';
	import config from '@/uni.config.js';
	import { removeSpace, bytesLength, cutStrByte } from '@/common/utils/index.js';
	import orderItemEmpty from '@/subpages/task/detail/components/order-item-empty.vue';
	defineComponent({
		orderItemEmpty
	})
	const { goAuth } = useStatus();
	// uni.showModal({
	// 	content: '1223222222222222222222222222222222222222222222222'
	// })
	const popup = ref(null)
	function openTan(){
		popup.value.open();
	}
	const data = reactive({
		steps: [{
			name: '登记需求',
			value: 1,
			desc: ''
		}, {
			name: '商户接单',
			value: 2,
			desc: ''
		}, {
			name: '执行需求',
			value: 3,
			desc: ''
		}],
		steps2: [{
			name: '登记需求',
			desc: '描述1'
		}, {
			name: '商户接单',
			desc: '描述1'
		}, {
			name: '执行需求',
			desc: '描述1'
		}, {
			name: '完成',
			desc: '描述1'
		}],
	})
	const list = ref([{ url: 'https://via.placeholder.com/728x300.png/ff0000' }, { url: 'https://via.placeholder.com/728x300.png/000000' }, { url: 'https://via.placeholder.com/728x200.png/aaaaaa' }, { url: 'https://via.placeholder.com/728x100.png/bbbbbb' },
	{ url: 'https://via.placeholder.com/728x100.png/cccccc' }, { url: 'https://via.placeholder.com/728x100.png/dddddd' }, { url: 'https://via.placeholder.com/728x100.png/eeeeee' }])
	const imgMode = ref('aspectFill')
	async function upload() {
		uni.chooseImage({
			count: 1,
			crop: {
				width: 600,
				height: 600
			},
			success(res) {
				const size = (+res.tempFiles[0].size / 1024 / 1024);
				if (size > 2) {
					useShow({
						content: '建议上传小于2M尺寸为100*100的图片',
						showCancel: false
					})
				} else {
					let data = [{
						type: 'head',
						fileUrl: res.tempFiles[0].path
					}]
					uploadImg(data).then(uploadRes => {
						console.log('uploadRes', uploadRes)
					}).catch(error => {});
				}
			}
		})
	}
	// const popupDemoRef = ref(null);
	// function open(){
	// 	popupDemoRef.value.open();
	// }
	async function demo() {
		const res = await addTask({
			title: '测试测试测试',
			price: 100,
			deadline: 'niho',
			description: '测试测试测试测试测试测试测试测试测试测试测试测试测试',
			task_from: 'crm',
			token: '26ca8173720018c0e794ec77deaf4963'
		});
		console.log('res', res)
	}

	function getuserinfo(e) {
		console.log(e)
	}

	function getInfo() {
		uni.getUserProfile({
			desc: '测试',
			success(res) {
				console.log(res)
			}
		})
	}
	setTimeout(() => {
		getInfo();
	})
	function openMini(){
		goAuth();
	}
</script>
<style>
	page {
		/* background-color: pink; */
	}
</style>
